<template>
  <div class="gridBox">
    <el-card>
      <div class="headerTitle">
        <div>总体接入情况</div>
        <div style="width: 390px">
          <el-date-picker
            v-model="pickerTime"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始时间"
            type="daterange"
            size="large"
            :disabled-date="(time) => time.getTime() > Date.now()"
            @change="changeDate"
          />
        </div>
      </div>
      <div class="charts">
        <div class="total">
          <div>
            当前在线数<span>
              <!-- 260 -->
              {{ onLineMsgs.data.deviceNum3 }}
            </span>
          </div>
          <div>
            当前启用数<span>
              <!-- 260 -->
              {{ onLineMsgs.data.deviceNum3 }}
            </span>
          </div>
          <div>
            当前总数<span>
              <!-- 250 -->
              {{ onLineMsgs.data.deviceNum3 }}
            </span>
          </div>
        </div>
        <div id="ztMain" :style="{ width: '500px', height: '400px' }"></div>
      </div>
    </el-card>
    <el-card>
      <div class="headerTitle" style="padding: 17.5px 20px">
        <div>关键设备维护信息</div>
      </div>
      <div class="tableBar">
        <el-table
          :data="equipData.tabledata"
          :header-cell-style="{
            'text-align': 'center',
            background: '#B4C7E7',
            color: '#333333',
          }"
          :cell-style="{
            'text-align': 'center',
            background: '#f5f8fb',
          }"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="设备名称" prop="name"></el-table-column>
          <el-table-column
            label="检验（校准）日期"
            prop="time"
            width="180"
          ></el-table-column>
          <el-table-column label="检查人" prop="people"></el-table-column>
          <el-table-column label="检查人手机" prop="tel"></el-table-column>
          <el-table-column label="设备说明书" prop="explain"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, reactive } from "vue";
import { ProjectGroupone } from "@/api/model/echarts";
import { AdminInputs, outlineMsg } from "@/api/model/admins";
import dayjs from "dayjs";
let pickerTime = ref("");
let equipData = reactive({
  tabledata: [
    {
      // equipName: '',
      // ruleDate: '',
      // inspector: '',
      // inspectorIphone: '',
      // instructions: '',
      explain: "",
      id: "1",
      name: "",
      people: "",
      tel: "",
      time: "",
    },
    {
      // equipName: '',
      // ruleDate: '',
      // inspector: '',
      // inspectorIphone: '',
      // instructions: '',
      explain: "",
      id: "1",
      name: "",
      people: "",
      tel: "",
      time: "",
    },
  ],
});
let state = reactive({
  a: {
    // indicatorName: "总体接入情况",
    // firstType: "设备总览",
    // secondType: "",
    // type: "year",
    // thirdType: "",
    // dataType: "year",
    // dayFrom: "1900-01-01",
    // dayTo: "2023-01-02"
    indicatorName: "设备在线分析",
    firstType: "项目概述",
    secondType: "",
    type: "day",
    projectId: 1,
    thirdType: "",
    dataType: "day",
    dayFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
    dayTo: dayjs().format("YYYY-MM-DD"),
  },
});
onMounted(() => {
  A();
  getTableData();
  outlineMsgs();
});
async function A() {
  let { data: res } = await ProjectGroupone(state.a);
  console.log(res, "设备接入情况");
  var byear = [];
  var num = [];
  var num2 = [];
  var num3 = [];
  res.data.commonDailyDataList.forEach((item) => {
    byear.push(`${item.day.substring(5, 10)}`);

    if (item.type == "type1") {
      num.push(item.number1);
    }
    if (item.type == "type2") {
      num2.push(item.number1);
    }
    if (item.type == "type3") {
      num3.push(item.number1);
    }
  });

  console.log(byear, "时间");
  let list = [...new Set(byear)];

  let myChart = echarts.init(document.getElementById("ztMain"));
  myChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: list,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#6e7079",
        },
      },
    },
    yAxis: {
      type: "value",
      // min: 0,
      max: Math.max(...num, ...num2, ...num3),
      // interval: 5,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#6e7079",
        },
      },
    },
    legend: {
      orient: "horizontal",
      itemHeight: 1,
      x: "right",
      data: ["当前在线数", "当前启用数", "当前总数"],
      icon: "rect",
    },
    series: [
      {
        name: "当前在线数",
        data: num,
        type: "line",
        color: "#dddddd",
      },
      {
        name: "当前启用数",
        data: num2,
        type: "line",
        symbol: "none",
        color: "#d90909",
      },
      {
        name: "当前总数",
        data: num3,
        type: "line",
        symbol: "none",
        color: "#fed24b",
      },
    ],
  });
}

async function getTableData() {
  let { data: res } = await AdminInputs();
  let facility = res.data.list[0].facility
  equipData.tabledata = JSON.parse(facility);
  // console.log(JSON.parse(res.data.facility),'关键设备数据');
}

let onLineMsgs = reactive({
  data: {},
});

const outlineMsgs = async () => {
  let { data } = await outlineMsg();
  onLineMsgs.data = data.data.deviceNum;

  console.log(data, "获取设备信息");
};

const changeDate = (e) => {
  if (e !== null) {
    state.a.dayFrom = e[0];
    state.a.dayTo = e[1];
  } else {
    state.a.dayFrom = "1900-01-01";
    state.a.dayTo = "2100-01-01";
  }
  A();
};
</script>

<style lang="less" scoped>
.gridBox {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  row-gap: 5px;
  column-gap: 5px;
}

:deep(.el-date-editor) {
  width: 400px;
}

:deep(.el-card__body) {
  padding: 0 !important;
}

.charts {
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;

  .total {
    margin-bottom: 50px;

    div {
      margin-top: 30px;
      font-size: 14px;
      justify-content: space-between;
      display: flex;
      width: 125px;
    }

    span {
      font-size: 16px;
      color: #3f80cc;
    }
  }
}

.tableBar {
  margin-top: 20px;
  padding: 0 10px;

  :deep(.el-table) {
    thead {
      color: #4d4d4d;
    }
  }
}
</style>
